---
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
import ProjectSection from "../components/ProjectSection.vue";
import Age  from "../components/Age.vue";
---

<!doctype html>
<html lang="en">
  <head>
    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
  </head>
  <body class="overflow-x-hidden">
    <Header title={SITE_TITLE} />
    <main class="text-lg text-neutral-200">
      <h1 class="text-4xl pb-2">Hi, I'm <span class="text-john">John</span></h1>
      <p>
        I'm <Age client:visible />
        y/o software engineer. I'm Bachelor of Computer Science. Blah blah.
        <b>I build stuff</b>. I like <b>web dev</b>, <b>game dev</b> and so much
        more. My main focus is full-stack stuff with <b>Typescript</b> and writing
        <s> very important</s> projects with <b>Rust</b> to train my monkey brain.
      </p>
      <p
        class="blur-sm hover:blur-none duration-100 transition-all ease-in-out text-white"
      >
        (This is not endorsed by <b>The Rust Foundation</b> tho :) )
      </p>
      <p>This year i found a new love of functional programming. Im writing <b>Gleam</b> and <b>OCaml</b> now. It's very fun</p>
      <p>
        If I feel fancy, I like doing research on random topics, engineering
        ones will end up as <a href="/blog">blog posts</a>. Sometimes you can
        also find me in <b>Warframe</b> grinding <b>prime relics</b>
        or in <b>Endless Space 2</b> conquering the galaxy.
      </p>
      <h2 class="pb-4">Things I've built or contributed to</h2>
      <ProjectSection client:visible />
    </main>
    <Footer />
  </body>
</html>
